<template>
  <VolHeader
    class="el-icon-s-grid"
    text="预算分析表"
    style="padding-left: 10px; margin-bottom: 26px"
  ></VolHeader>
  <div>
    <el-form ref="form" :model="tj_options.wheres.form" label-width="120px" :inline="true">
      <el-form-item label="财务年度">
        <el-select
          v-model="tj_options.wheres.form.year"
         
          placeholder=""
          @change="tj_search()"
        >
          <el-option
            v-for="item in year_region"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月份">
        <el-select
          v-model="tj_options.wheres.form.month"   
          placeholder=""
          @change="tj_search()"
        >
          <el-option label="1月" value="1"/>
          <el-option label="2月" value="2"/>
          <el-option label="3月" value="3"/>
          <el-option label="4月" value="4"/>
          <el-option label="5月" value="5"/>
          <el-option label="6月" value="6"/>
          <el-option label="7月" value="7"/>
          <el-option label="8月" value="8"/>
          <el-option label="9月" value="9"/>
          <el-option label="10月" value="10"/>
          <el-option label="11月" value="11"/>
          <el-option label="12月" value="12"/>
        </el-select>
      </el-form-item>
      <el-form-item label="成本中心">
        <el-select
          v-model="tj_options.wheres.form.cntr"
          
          placeholder=""
          @change="tj_search()"
        >
          <el-option
            v-for="item in cntr_region"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科目">
        <el-select v-model="tj_options.wheres.form.racct" placeholder="" @change="tj_search()">
          <el-option
            v-for="item in racct_region"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option
        ></el-select>
      </el-form-item>
    </el-form>

    <el-row>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light"><el-button type="primary" @click="downfile()">导出</el-button></div>
    </el-col>
    </el-row>
    <el-table
      highlight-current-row
      height="380"
      border
      ref="multipleTable"
      :data="tabledata"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
	  @row-click="rowclick"
    >
      <el-table-column prop="racct_name" label="费用科目" fixed width="120">
      </el-table-column>
      <el-table-column prop="racct" label="费用编码" fixed width="120">
      </el-table-column>
      <el-table-column prop="rcntr_name" label="成本中心" fixed width="120">
      </el-table-column>
      <el-table-column prop="rcntr" label="成本中心编码" fixed width="120">
      </el-table-column>
      
      <el-table-column prop="" label="本月" width="320">
        <el-table-column prop="s_ys_month" label="考核预算数" width="120" />
        <el-table-column prop="s_sj_yue" label="考核实际数" width="120" />
        <el-table-column prop="" label="预算差异" width="120">
          <el-table-column prop="yue_cy" label="差异数" width="120" />
          <el-table-column prop="yue_cy_ratio" label="月度差异差异率" width="120" />
        </el-table-column>
      </el-table-column>
      <el-table-column prop="" label="年度累计到目前" width="320">
        <el-table-column prop="s_ys_year" label="考核预算数" width="120" />
        <el-table-column prop="s_sj_year" label="考核实际数" width="120" />
        <el-table-column prop="" label="预算差异" width="120">
          <el-table-column prop="year_cy" label="差异数" width="120" />
          <el-table-column prop="year_cy_ratio" label="累计差异率" width="120" />
        </el-table-column>
      </el-table-column> 
    </el-table>
    <div style="text-align: center; margin-top: 30px">
      <el-pagination
        background
        layout="total,sizes,prev, pager, next"
        :total="rows"
        :page-sizes="[30, 60, 100, 120, 200]"
        :page-size="tj_options.pagesize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <ys_analyse_detail ref="ys_analyse_detail"></ys_analyse_detail>
  </div>
</template>

<script>
import VolHeader from "@/components/basic/VolHeader.vue";
import VolForm from "@/components/basic/VolForm.vue";
import VolTable from "@/components/basic/VolTable.vue";
import http from "@/api/http.js";
import ys_analyse_detail from "@/views/mytable/mytable/ys_analyse_detail.vue";
export default {
  components: { VolForm, VolHeader, VolTable,ys_analyse_detail},
  data() {
    return {
      tabledata: [],
      rows: 0,
      tj_options: {
        //提交给后台查询条件
        currentpage: 1, //当前页
        pagesize: 30, //每页大小
        wheres: {
          form: {
            //用于提交到后端的数据结构
            year: "",
            month:"",
            racct: "all",
            cntr: "all",
          },
        },
      },
      cntr_region: [], //接受初始话数据
      racct_region: [], //接受初始话数据
      year_region: [], //接受初始话数据
    };
  },
  setup() {},
  mounted() {
    this.init_ys_analyse();
    this.tj_search();
  },
  destroyed() {},
  methods: {
	rowclick(row, column, event){
		let tijian={
          racct:row.racct,
					rcntr:row.rcntr,
					racct_name:row.racct_name,
					rcntr_name:row.rcntr_name,
					month:this.tj_options.wheres.form.month,
					year:this.tj_options.wheres.form.year,
					};
		let _tijiao=encodeURIComponent(JSON.stringify(tijian));
		
		//console.log(row);
		
		let url = "/api/Fk_yusuan/ys_analyse_detail?options=" + _tijiao;
		http.post(url, {}, true).then((s) => {
		  //console.log(s);
		  s.ys.forEach(x=>{x.racct_name=s.racct_name;x.rcntr_name=s.rcntr_name;});//把中文名称赋值给ys,相当于给s.ys增加属性
		  s.sj.forEach(x=>{x.racct_name=s.racct_name;x.rcntr_name=s.rcntr_name;});
		  this.$refs.ys_analyse_detail.ys_data=s.ys;
		  this.$refs.ys_analyse_detail.sj_data=s.sj;
		  //console.log(this.$refs.ys_analyse_detail.ys_data);
		  //return;
		  //this.rows = s.rows;
		  //this.tabledata.splice(0, this.tabledata.length);
		  //this.tabledata.push(...s._query);
		  
		});
	},
    downfile(){//使用文件流下载文件
      let url=this.http.ipAddress +
            "api/Fk_yusuan/customer_export";
      http.post(url, {}, "正在导出数据....", { responseType: "blob" }).then((content) => {
		  const blob = new Blob([content]);
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = "导出文件.xlsx";
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
          }else{
            navigator.msSaveBlob(blob, "导出文件非IE.xlsx");
          }
      })
    },
    init_ys_analyse() {
      let url = "/api/Fk_yusuan/ys_analyse_init";
      http.post(url, {}, true).then((s) => {
        this.init_select(s);
      });
    },
    tj_search() {
      let _tjoptions = encodeURIComponent(JSON.stringify(this.tj_options));
      let url = "/api/Fk_yusuan/ys_analyse?options=" + _tjoptions;
      http.post(url, {}, true).then((s) => {
        //console.log(s);
        //return;
        this.rows = s.rows;
        this.tabledata.splice(0, this.tabledata.length);
        this.tabledata.push(...s._query);
        
      });
    },

    handleCurrentChange(val) {
      //点击下一页
      //val当前点击第页面
      this.tj_options.currentpage = val;
      this.tj_search();
    },
    handleSizeChange(val) {
      //改变页面大小
      this.tj_options.pagesize = val;
      this.tj_search();
    },

    init_select(s) {
      this.year_region = s.array_year;
      //console.log(s.array_year);
      var date = new Date();
      this.tj_options.wheres.form.year = date.getFullYear();
      let mouth_string=date.getMonth()+1;
      this.tj_options.wheres.form.month =mouth_string.toString();
      //console.log(date.getMonth()+1)
      //this.year_region.splice(0, 0, { value: date.getFullYear(), label: date.getFullYear()+"年度" });//插入到第0位

      this.cntr_region = s.array_cntr;
      this.cntr_region.splice(0, 0, { value: "all", label: "【全部】" }); //插入到第0位
      this.tj_options.wheres.form.cntr = "all";
      //this.cntr_region.push({value:"all",label:"【所有】"})

      this.racct_region = s.array_typelist;
      this.racct_region.splice(0, 0, { value: "all", label: "【全部】" }); //插入到第0位
      this.tj_options.wheres.form.racct = "all";
    },
  },
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 0px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 0px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
